在第二十一天,你已經對 Fragment
有了初步的認識,知道它可以讓介面設計更靈活。
但在現實開發中,我們很少單獨使用 Fragment
。它最常與 ViewPager2
和 TabLayout
這兩個元件搭配使用,來實現頁籤切換的功能。
ViewPager2
:一個可以左右滑動的容器。TabLayout
:頁面最上方的標籤列,讓使用者可以點擊切換頁面。Fragment
:每個頁籤所顯示的內容,也就是「拼圖」。這三個元件組合在一起,就像是打造一個**「可以左右滑動的書本」**:
ViewPager2
是書本的**「內頁」**。TabLayout
是書本的**「目錄」**。Fragment
則是每一頁的**「內容」**。今天,我們要製作一個簡單的 App,有三個頁籤:首頁、個人檔案和設定。每個頁籤都會是一個獨立的 Fragment
。
Fragment
類別:
HomeFragment
ProfileFragment
SettingsFragment
Fragment
建立一個簡單的 XML 佈局,例如 fragment_home.xml
,裡面放一個 TextView
來顯示頁面名稱。fragment_home.xml
範例:
`<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="這是首頁"
android:textSize="30sp" />
</LinearLayout>`
fragment_profile.xml
和 fragment_settings.xml
也依此類推,只需修改 TextView
的文字即可。
我們需要一個專門用來管理 Fragment
的 Adapter
。這個 Adapter
會告訴 ViewPager2
總共有幾個頁面,以及每個頁面要顯示哪個 Fragment
。
MainActivity.java
所在的資料夾,選擇 New
-> Java Class
。ViewPagerAdapter
,並讓它繼承 FragmentStateAdapter
。`import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
public class ViewPagerAdapter extends FragmentStateAdapter {
public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
// 根據位置 (position) 回傳對應的 Fragment
switch (position) {
case 0:
return new HomeFragment();
case 1:
return new ProfileFragment();
case 2:
return new SettingsFragment();
default:
return new HomeFragment();
}
}
@Override
public int getItemCount() {
// 回傳總頁數
return 3;
}
}`
activity_main.xml
我們需要一個 ViewPager2
來裝頁面,和一個 TabLayout
來放標籤。
`<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>`
MainActivity.java
這是最後一步,我們將所有的元件串接起來。
`import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. 找到元件
TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager2 viewPager = findViewById(R.id.viewPager);
// 2. 準備 Adapter
ViewPagerAdapter adapter = new ViewPagerAdapter(this);
viewPager.setAdapter(adapter);
// 3. 將 TabLayout 和 ViewPager2 綁定起來
new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
switch (position) {
case 0:
tab.setText("首頁");
break;
case 1:
tab.setText("個人檔案");
break;
case 2:
tab.setText("設定");
break;
}
}).attach();
}
}`
今天我們學會了:
ViewPager2
、TabLayout
和 Fragment
的三元組合技。FragmentStateAdapter
來管理多個 Fragment
。TabLayoutMediator
將 TabLayout
和 ViewPager2
綁定起來,實現頁面切換。現在已經能夠製作出非常現代、流暢的多頁面 App 了!接下來,我們將進入最後一個階段:網路連線。這是 一個重要的實用技能。
明天見!